<template>
  <transition name="componentTab">
    <div
      class="classroom"
      v-if="classInfo"
      ref="classroom"
      @scroll.stop="scrollEvent"
    >
      <header class="header" :class="{ 'header-scroll': scrollTop >= 100 }">
        <div class="left" @click.stop="$router.go(-1)">
          <svg
            t="1675766060581"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3763"
            width="16"
            height="16"
          >
            <path
              d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536"
              p-id="3764"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
        <div class="right">
          <div class="friend">
            <svg
              t="1675766019437"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2766"
              width="16"
              height="16"
            >
              <path
                d="M177.738667 652.949333A364.074667 364.074667 0 0 0 331.306667 826.517333v-310.826666L192.490667 645.152c-4.298667 4.010667-9.397333 6.613333-14.752 7.808z m-19.989334-62.922666l209.706667-195.562667H170.666667c-0.618667 0-1.237333-0.010667-1.845334-0.053333A362.186667 362.186667 0 0 0 149.333333 512c0 26.784 2.901333 52.906667 8.416 78.026667z m302.08-195.562667a32.064 32.064 0 0 1-5.152 6.186667l-62.112 57.909333c1.76 3.957333 2.730667 8.341333 2.730667 12.949333v79.541334c3.584 1.642667 6.912 3.978667 9.802667 7.008l67.573333 70.848h90.570667l68.298666-72.938667v-95.872l-68.181333-66.826667c-2.773333 0.778667-5.685333 1.194667-8.693333 1.194667h-94.837334zM395.232 855.466667A362.218667 362.218667 0 0 0 512 874.666667c32.768 0 64.522667-4.341333 94.72-12.490667l-211.413333-221.653333V853.333333c0 0.714667-0.032 1.418667-0.074667 2.133334z m275.466667-17.269334a364.266667 364.266667 0 0 0 155.690666-145.28H533.706667l131.946666 138.346667c2.026667 2.133333 3.712 4.469333 5.045334 6.933333z m184.693333-209.216A362.208 362.208 0 0 0 874.666667 512c0-36.661333-5.44-72.053333-15.552-105.408L650.912 628.906667H853.333333c0.693333 0 1.376 0.021333 2.058667 0.064zM197.962667 330.464h301.312l-139.733334-136.938667a31.978667 31.978667 0 0 1-5.898666-7.893333A364.266667 364.266667 0 0 0 197.973333 330.474667z m220.373333-168.917333l213.205333 208.938666v-195.2c0-1.92 0.170667-3.786667 0.490667-5.621333A362.112 362.112 0 0 0 512 149.333333c-32.384 0-63.786667 4.245333-93.653333 12.213334zM695.552 446.613333V487.637333l134.432-143.573333c0.746667-0.8 1.546667-1.557333 2.346667-2.261333a364.373333 364.373333 0 0 0-136.778667-142.666667v247.488zM512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z"
                fill="#ffffff"
                p-id="2767"
              ></path>
            </svg>
          </div>
          <div class="weixin">
            <svg
              t="1675766151088"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4878"
              width="16"
              height="16"
            >
              <path
                d="M867.265306 867.265306c-3.134694 0-6.791837-1.044898-9.92653-2.612245l-54.857143-28.734694c-39.183673 20.37551-83.069388 31.346939-128.522449 31.346939-141.061224 0-256-102.922449-256-229.877551s114.938776-229.877551 256-229.877551 256 102.922449 256 229.877551c0 50.677551-18.808163 100.310204-53.289796 140.538776l10.971428 65.306122c1.567347 7.836735-2.089796 15.673469-8.359183 20.37551-3.657143 2.089796-7.836735 3.657143-12.016327 3.657143z m-193.306122-417.959184c-118.073469 0-214.204082 84.114286-214.204082 188.081633s96.130612 188.081633 214.204082 188.081633c42.318367 0 83.069388-10.971429 118.073469-31.346939 6.269388-3.657143 14.106122-3.657143 20.37551-0.522449l27.167347 14.106122-5.746939-33.436734c-1.044898-6.269388 1.044898-13.061224 5.22449-17.763266 31.346939-33.436735 49.110204-76.277551 49.110204-119.640816 0-103.444898-96.130612-187.559184-214.204081-187.559184z"
                fill="#ffffff"
                p-id="4879"
              ></path>
              <path
                d="M579.918367 579.395918m-31.346938 0a31.346939 31.346939 0 1 0 62.693877 0 31.346939 31.346939 0 1 0-62.693877 0Z"
                fill="#ffffff"
                p-id="4880"
              ></path>
              <path
                d="M768 579.395918m-31.346939 0a31.346939 31.346939 0 1 0 62.693878 0 31.346939 31.346939 0 1 0-62.693878 0Z"
                fill="#ffffff"
                p-id="4881"
              ></path>
              <path
                d="M292.571429 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
                fill="#ffffff"
                p-id="4882"
              ></path>
              <path
                d="M512 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142858 0 36.571429 36.571429 0 1 0-73.142858 0Z"
                fill="#ffffff"
                p-id="4883"
              ></path>
              <path
                d="M166.138776 709.485714c-4.179592 0-8.881633-1.567347-12.538776-4.179592-6.269388-4.702041-9.404082-12.538776-8.359184-20.37551l14.106123-81.502041C117.028571 554.840816 94.040816 494.759184 94.040816 433.110204 94.040816 280.555102 232.489796 156.734694 402.285714 156.734694c80.979592 0 157.257143 27.689796 215.24898 78.889796 58.514286 51.2 91.428571 119.640816 92.995918 193.306122 0 5.746939-2.089796 11.493878-6.269388 15.67347s-9.926531 6.269388-15.673469 5.746938c-5.22449-0.522449-9.926531-0.522449-14.106122-0.522449-118.073469 0-214.204082 84.114286-214.204082 188.081633 0 14.106122 2.089796 28.734694 5.746939 42.840816 1.567347 5.746939 0.522449 12.016327-2.612245 17.240817s-8.881633 8.359184-14.628572 8.881632c-15.15102 2.089796-30.302041 3.134694-45.453061 3.134694-55.902041 0-109.714286-13.583673-157.257143-38.661224l-68.963265 36.571428c-4.179592 0.522449-7.836735 1.567347-10.971428 1.567347z m78.889795-83.591836c3.657143 0 7.314286 1.044898 10.44898 2.612244 48.587755 28.212245 106.057143 41.795918 164.571429 38.138776-1.567347-9.926531-2.089796-19.853061-2.089796-29.779592 0-124.865306 111.281633-226.742857 249.208163-229.877551-14.628571-117.028571-128.522449-208.979592-264.881633-208.979592-146.808163 0-266.44898 105.012245-266.448979 234.579592 0 54.334694 21.942857 107.62449 61.12653 149.420408 4.702041 4.702041 6.269388 11.493878 5.22449 17.763266l-8.359184 50.155102 41.795919-21.942858c3.134694-1.044898 6.269388-2.089796 9.404081-2.089795z"
                fill="#ffffff"
                p-id="4884"
              ></path>
            </svg>
          </div>
          <div class="svg">
            <svg
              t="1675680491901"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6386"
              width="16"
              height="16"
            >
              <path
                d="M188.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6387"
              ></path>
              <path
                d="M516.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6388"
              ></path>
              <path
                d="M836.5 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6389"
              ></path>
            </svg>
          </div>
        </div>
      </header>
      <div class="big-img">
        <img :src="classInfo.i" alt="" />
      </div>
      <div class="class-info">
        <div class="title">{{ classInfo.t }}</div>
        <div class="user">
          <div class="img-box">
            <img :src="classInfo.anchor.p" alt="" />
          </div>
          <div class="autor my-text">{{ classInfo.anchor.n }}</div>
          <div class="lv">Lv.{{ classInfo.anchor.lvl }}</div>
          <div class="btn" @click.stop="payAtt()">{{!isPayAtt?"关注":"已关注"}}</div>
        </div>
        <div class="tags">
          <span v-for="(item, index) in classInfo.ts" :key="index">{{
            item.t
          }}</span>
        </div>
        <div class="sec-title">课程列表</div>
        <div class="class-list">
          <div
            class="class-item"
            v-for="(item, index) in classInfo.sc"
            :key="index"
          >
            <div class="left">{{ index + 1 }}</div>
            <div class="midle">
              <div class="t">{{ item.t }}</div>
              <div class="time">{{ item.dur }}</div>
            </div>
            <div class="right">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="31px"
                height="50px"
              >
                <image
                  x="0px"
                  y="0px"
                  width="31px"
                  height="50px"
                  xlink:href="data:img/png;base64,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"
                />
              </svg>
            </div>
          </div>
        </div>
        <div class="class-detail-info">
          <div
            class="cdi-item"
            v-for="(item, index) in classInfo.intros"
            :key="index"
          >
            <div class="cdi-item-title">{{ item.title }}</div>
            <div class="content">
              <div v-for="(t, i) in item.content.split(/\s/g)" :key="i">
                {{ t }}
              </div>
            </div>
          </div>
        </div>
        <div class="class-call">
          <div class="first">
            <div class="img-box">
              <img :src="classInfo.brand_icon" alt="" />
            </div>
            <div class="green">常见问题</div>
          </div>
          <div class="text">{{ classInfo.brand_description }}</div>
        </div>
        <div class="other_courses" v-if="other_courses">
          <div class="other_courses-title">
            <div class="left">{{ other_courses.title }}</div>
            <div class="right">查看全部</div>
          </div>
          <div class="other_courses-list">
            <div>
              <ClassItem
                v-for="(classItem, index) in other_courses.courses"
                :key="classItem.id + '' + index"
                :classItem="classItem"
              />
            </div>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class="left" :class="{active:isClass}" @click.stop="payClass">
          <van-icon class="icon" name="star-o" />
          <div class="text">{{!isClass?"收藏":"已收藏"}}</div>
        </div>
        <div class="right">{{ classInfo.p }} 购买教程</div>
      </footer>
    </div>
  </transition>
</template>

<script>
import qs from "qs";
import ClassItem from "@/components/ClassItem.vue";
export default {
  components: {
    ClassItem,
  },
  data: () => {
    return {
      isClass:false,
      isPayAtt:false,
      scrollTop: 0,
      classInfo: null,
      other_courses: null,
    };
  },
  methods: {
    //收藏课程
    payClass(){
      this.api.payClass(this.classInfo,this.isClass);
      this.$toast.success("操作成功");
      this.isClass = !this.isClass;
    },
    //关注用户
    payAtt(){
      this.api.payAttention(this.classInfo.anchor,this.isPayAtt);
      this.$toast.success("操作成功");
      this.isPayAtt = !this.isPayAtt;
    },
    scrollEvent(e) {
      this.scrollTop = e.target.scrollTop;
    },
    //获取课程详情
    getClassInfo() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/course/coursedetail`,
        data: qs.stringify({
          id: this.$route.params.classid,
        }),
        headers: {
          client: this.api.client,
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.classInfo = res.data.result.c;
        this.other_courses = res.data.result.other_courses;
        this.isClass = JSON.parse(localStorage.getItem("classItemList"))?.some(
              (item) => item.id == this.classInfo.id
            ) || false;
        this.isPayAtt = JSON.parse(localStorage.getItem("attentionList"))?.some(
          (item) => item.id == this.classInfo.anchor.id
        ) || false;
        this.$nextTick(() => {
          this.$refs.classroom.scrollTop = 0;
        });
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getClassInfo();
  },
  activated() {
    this.getClassInfo();
  },
};
</script>

<style lang="scss" scoped>
.classroom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  z-index: 100;
  padding-bottom: 1rem;
  box-sizing: border-box;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .sec-title {
    font-size: 0.18rem;
    color: var(--text-black);
    font-weight: bold;
    margin: 0.1rem 0;
    text-indent: 0.08rem;
  }
  .header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    height: 0.5rem;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    padding: 0.1rem;
    transition: 0.3s;
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    );
    .left {
      width: 0.2rem;
      min-width: 0.2rem;
      height: 0.38rem;
    }
    .right {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      > div {
        margin-left: 0.35rem;
      }
      .friend {
        width: 0.2rem;
        height: 0.2rem;
      }
      .weixin {
        width: 0.25rem;
        height: 0.25rem;
      }
      .svg {
        margin-right: 0.05rem;
        width: 0.2rem;
        height: 0.2rem;
      }
    }
  }
  .header-scroll {
    border-bottom: 0.01rem solid var(--border-gray);
    background-color: var(--white);
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    );
    svg {
      fill: #262626 !important;
    }
    path {
      fill: #262626 !important;
    }
  }
  .big-img {
    width: 100%;
  }
  .class-info {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.05rem;
    .title {
      margin: 0.1rem;
      font-weight: bold;
      font-size: 0.25rem;
    }
    .user {
      width: 100%;
      display: flex;
      align-items: center;
      > div {
        margin-right: 0.1rem;
      }
      .img-box {
        width: 0.34rem;
        height: 0.34rem;
        border-radius: 0.17rem;
        overflow: hidden;
      }
      .autor {
        font-size: 0.16rem;
        font-weight: bold;
      }
      .lv {
        font-size: 0.12rem;
        line-height: 0.12rem;
        color: var(--text-lv);
      }
      .btn {
        width: 0.786rem;
        height: 0.32rem;
        border-radius: 0.16rem;
        margin-left: auto;
        margin-right: 0;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.12rem;
        background-color: var(--text-yellow);
        color: var(--white);
      }
    }
    .tags {
      width: 100%;
      padding: 0.05rem;
      font-size: 0.15rem;
      color: var(--text-gray2);
      > span {
        margin-right: 0.05rem;
        margin-bottom: 0.05rem;
      }
    }
    .class-list {
      width: 100%;
      box-sizing: border-box;
      .class-item {
        width: 3.3rem;
        height: 0.9rem;
        margin: 0.1rem auto;
        background-color: var(--bgc-gray3);
        border-radius: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 0.1rem 0.04rem var(--bgc-gray);
        .left {
          width: 0.35rem;
          min-width: 0.35rem;
          height: 0.4rem;
          border-radius: 0 0.2rem 0.2rem 0;
          background-color: var(--bgc-black2);
          color: var(--text-white);
          text-align: center;
          line-height: 0.4rem;
        }
        .midle {
          flex-grow: 1;
          margin-left: 0.1rem;
          .t {
            font-size: 0.18rem;
          }
          .time {
            font-size: 0.14rem;
            color: var(--text-gray);
            margin-top: 0.05rem;
          }
        }
        .right {
          width: 0.3rem;
          min-width: 0.3rem;
          height: 0.5rem;
          margin-right: 0.2rem;
        }
      }
    }
    .class-detail-info {
      width: 100%;
      .cdi-item {
        width: 100%;
        box-sizing: border-box;
        margin-top: 0.2rem;
        .cdi-item-title {
          position: relative;
          height: 0.4rem;
          line-height: 0.4rem;
          font-size: 0.17rem;
          font-weight: bold;
          text-align: center;
          margin: 0 auto;
          &::after {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            bottom: 0.1rem;
            margin: 0 auto;
            width: 0.8rem;
            height: 0.08rem;
            background-color: var(--bgc-yellow);
            z-index: -1;
          }
        }
        .content {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.1rem;
        }
      }
    }
    .class-call {
      width: 100%;
      box-sizing: border-box;
      padding: 0 0.1rem;
      margin: 0.3rem 0;
      .first {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.2rem;
        .img-box {
          width: 1.2rem;
          height: 0.4rem;
        }
        .green {
          color: var(--text-green);
        }
      }
      .text {
        width: 100%;
        box-sizing: border-box;
        border-radius: 0.1rem;
        background-color: var(--bgc-gray);
        padding: 0.2rem;
      }
    }
    .other_courses {
      width: 100%;
      .other_courses-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          font-size: 0.25rem;
          font-weight: bold;
        }
        .right {
          font-size: 0.15rem;
          color: var(--text-green);
        }
      }
      .other_courses-list {
        width: 100%;
        overflow-x: scroll;
        margin-top: 0.1rem;
        &::-webkit-scrollbar {
          display: none;
        }
        > div {
          width: max-content;
          display: flex;
          > div {
            margin-right: 0.1rem;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgc-white);
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 0.75rem;
      .icon {
        font-size: 0.25rem;
      }
      .text {
        font-size: 0.15rem;
        margin-left: 0.05rem;
      }
    }
    .active{
      color: var(--text-yellow);
    }
    .right {
      width: 2.6rem;
      height: 0.4rem;
      border-radius: 0.23rem;
      line-height: 0.4rem;
      font-size: 0.15rem;
      text-align: center;
      background-color: var(--bgc-yellow);
      margin-left: 0.18rem;
      font-weight: bold;
    }
  }
}
</style>